<template>
  <view class="search-page">
    <globalNavBar title="搜索"/>
    <view class="container">
      <view class="search">
        <uv-search placeholder="请输入搜索内容" bgColor="#fff" v-model="keyword" @search="search"
                   @custom="search"/>
      </view>
      <view class="history">
        <view class="row1">
          <view class="title">历史记录</view>
          <view class="clear" @click="clearHistory">
            <uv-icon name="trash" size="48rpx" color="#999"></uv-icon>
          </view>
        </view>
        <view class="row2">
          <view class="item" v-for="(item, i) in historyList" :key="i" @click="search(item)">
            {{ item }}
          </view>
        </view>
      </view>
      <view class="result">
        <view class="title">搜索结果</view>
        <view class="content">
          <view class="item" v-for="(item, i) in resultList" :key="i" @click="goDetails(item.id)">
            <view class="left" v-if="item.image">
              <uv-image :src="item.image" mode="aspectFill" width="176rpx"
                        height="176rpx"></uv-image>
            </view>
            <view class="right">
              <view class="title">{{ item.title }}</view>
              <view class="info">{{ item.descript }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import http from '@/utils/request.js'
	
export default {
  data() {
    return {
      keyword: '',
      historyList: [],
      resultList: [

      ]
    }
  },
  onLoad(){
	this.getHistorySearchList();  
  },
  methods: {
	  getHistorySearchList(){
		let history = uni.getStorageSync('history_search');  
		if(history){
			this.historyList = history;
		}
	  },
    getResult(item) {
		var that = this;
		this.resultList = [];
		http.post('api/article/index',{title:item}).then(function(data){
			let news = data.data.list.data;
			let newsNum = news.length;
			for(let i = 0; i < newsNum; i++){
				that.resultList.push({
					id : news[i].id,
					title : news[i].title,
					descript :news[i].addtime_date,
					image : http.common.baseUri+news[i].topimg
				})
			}
		})
    },
    search(item) {
      this.keyword = item
		if(this.historyList.length){
			let tempArr = this.historyList;
			let hasVal = false;
			for(let i = 0; i <tempArr.length; i++){
				if(tempArr[i] == item){
					hasVal = true;
					break;
				}
			}
			if(!hasVal){
				this.historyList.push(item)
			}
		}else{
			this.historyList.push(item);
		}
	  uni.setStorageSync('history_search',this.historyList);
      this.getResult(item);
    },
    goDetails(id) {
      uni.navigateTo({url: `/pages/news/details?id=${id}`})
    },
	clearHistory(){
		uni.removeStorageSync('history_search');
		this.historyList = [];
	}
  }
}
</script>

<style lang="scss" scoped>
.search-page {
  width: 100%;
  min-height: 100vh;

  .container {
    .search {
      width: calc(100% - 36rpx);
      padding: 18rpx;
      background-color: #e9eaea;
      @include flex(row, center, center);
    }

    .history {
      width: calc(100% - 60rpx);
      padding: 30rpx 30rpx 0;

      .row1 {
        @include flex(row, space-between, center);

        .title {
          font-size: 32rpx;
        }
      }

      .row2 {
        margin-top: 10rpx;
        @include flex(row, flex-start, center);
        flex-wrap: wrap;

        .item {
          margin-left: 20rpx;
          margin-top: 20rpx;
          padding: 10rpx 20rpx;
          background-color: #f5f5f5;
          font-size: 26rpx;
          color: #9c9c9c;
        }
      }
    }

    .result {
      width: calc(100% - 60rpx);
      padding: 10rpx 30rpx 0;

      .title {
        font-size: 32rpx;
      }

      .content {
        width: calc(100% - 60rpx);
        padding: 0 30rpx 0;
        margin-top: 20rpx;

        .item {
          @include flex(row, flex-start, center);
          padding-bottom: 20rpx;
          border-bottom: 1rpx solid #e9eaea;

          .left {
            width: 176rpx;
            height: 176rpx;
          }

          .right {
            width: 0;
            flex: 1;
            height: 176rpx;
            margin-left: 20rpx;
            @include flex(column, center, flex-start);

            .title {
              font-size: 32rpx;
              @include text_ellipsis(1);
            }

            .info {
              margin-top: 44rpx;
              font-size: 26rpx;
              color: #9c9c9c;
              @include text_ellipsis(2);
            }
          }
        }
      }
    }
  }
}
</style>
